  /****************************************** 
  	 初始化数据
  	*******************************************/
  //echart   
  var mucusChart;
  var mucusTitle = "宫颈粘液";
  var mucusPeriodTitle = "周期背景颜色";
  var gridX = 0;
  var gridY = 0;
  var gridX2 = 0;
  var gridY2 = 30;
  
  //X轴
  var currentDateStr;	
 
  var webviewWidth;
  var webviewHeight;
  var mucusChartHeight;
  var mucusChartWidth;

  var xTickLength;
  var mucusChartHeightPercentage = 0.7;
  var chartDelta = 10;
	
  var SCALE_FACTOR = 19;
  //var showDaysTotalNum = localStorage.getItem("customerDataJSONArrayLenKey");
  var showDaysTotalNum = localStorage.getItem("limitedCustomerDateArrayLenKey");

  var xAxisDateArray = new Array();
  
  var mucusDataArray = new Array();
  
  //Y轴
  var yAxisLength;
  var yAxisTickLength;
  var yAxisMinMucus = 0;
  var yAxisMaxMucus = 4;
  var yAxisSplitNumber = 4;
  var yAxisMargin = -45;
  var mucusYAxisContent;

  var lang = localStorage.getItem("language");
  if(lang == "chinese"){
    mucusYAxisContent = new Array("蛋清", "粘稠", "潮湿", "干燥");
  }else if(lang == "english"){
    mucusYAxisContent = new Array("EggWhite", "Sticky", "Wet", "Dry");
  }

  //背景色
//  var yjqBackgroundColor = 'rgba(255,232,232,0.8)';
//  var lpqBackgroundColor = 'rgba(198,226,255,0.8)';
//  var plqBackgroundColor = 'rgba(232,247,225,0.8)';
//  var htqBackgroundColor = 'rgba(255,250,205,0.8)';
//  var aqqBackgroundColor = plqBackgroundColor;
//  var wxqBackgroundColor = 'rgba(253,105,105,0.8)';
//  var unknownBackgroundColor = 'rgba(255,255,255,0.8)';

  var yjqBackgroundColor = 'rgba(245,203,251,0.8)';
  var lpqBackgroundColor = yjqBackgroundColor;
  var plqBackgroundColor = yjqBackgroundColor;
  var htqBackgroundColor = yjqBackgroundColor;
  var aqqBackgroundColor = yjqBackgroundColor;
  var wxqBackgroundColor = yjqBackgroundColor;
  var unknownBackgroundColor = yjqBackgroundColor;

  function initMucusChartData(){
		initXAxisData();
		initYAxisData();
		initMucusChartZone();
  }

    //x轴数据初始化
    function initXAxisData(){
        // 这是所有的customer数据
        // var customerDateStr = localStorage.getItem("customerDateKey");
        // xAxisDateArray = getCustomerDateArray(customerDateStr);

        // 这是截取三个月经周期的日期数据
        var limitedCustomerDateArrayStr = localStorage.getItem("limitedCustomerDateArrayKey");
        xAxisDateArray = limitedCustomerDateArrayStr.split(",");
    }

    //y轴数据初始化
	function initYAxisData(){
    	for(var i = 0; i < xAxisDateArray.length; i++){
    		mucusDataArray[i] = customerDateMucusMap.get(xAxisDateArray[i]);
    	}
    }

	function initMucusChartZone(){
    	webviewWidth = getScreenWidth();
    	webviewHeight = getScreenHeight();
 
    	mucusChartHeight = webviewHeight * mucusChartHeightPercentage - chartDelta;
		mucusChartWidth = webviewWidth;
		
		setMucusChartFixZone(mucusChartWidth, mucusChartHeight);
		setMucusChartScrollZone(mucusChartWidth, mucusChartHeight);

    	setMucusChartSreen(mucusChartWidth, mucusChartHeight);
    	setYAxisDiv();
    	showMucusDetail();
    	showMucusYAxis();
    }
    
    function getScreenWidth(){
    	return window.innerWidth;
    }
    
    function getScreenHeight(){
    	return window.innerHeight;
    }
    
    function setMucusChartFixZone(mucusChartWidth, mucusChartHeight){
    	document.getElementById('div_fix_zone').style.width = mucusChartWidth + "px";
    	document.getElementById('div_fix_zone').style.height = mucusChartHeight + "px";
    }
    
    function setMucusChartScrollZone(mucusChartWidth, mucusChartHeight){
    	document.getElementById('div_scroll_zone').style.width = mucusChartWidth + "px";
    	document.getElementById('div_scroll_zone').style.height = mucusChartHeight + "px";
    }
    
    function setMucusChartSreen(mucusChartWidth, mucusChartHeight){
    	initXTickLength();
    	document.getElementById('mucusChart').style.width = xTickLength * showDaysTotalNum + "px";
    	document.getElementById('mucusChart').style.height = mucusChartHeight + "px";
    	document.getElementById('div_scroll_zone').scrollLeft = getMarginLeft();       
    }
    
     /****************************************** 
  	 设置画完图后让今天数据处于图中的滑动距离
  	*******************************************/
    function getMarginLeft(){    		
    	return getDeltaMoveDays() * xTickLength;
    }
    
    //为了让今天的温度居中，需要位移Delta个日期：真正今天之前的
    function getDeltaMoveDays(){
    	var semiSreenDaysNum = (SCALE_FACTOR - 1) / 2;
    	var beforeDaysNum = getBeforeShowDaysNum();
    	var afterDaysNum = showDaysTotalNum - beforeDaysNum - 1;

    	if((beforeDaysNum > semiSreenDaysNum) && (afterDaysNum >= semiSreenDaysNum))
    		return beforeDaysNum - semiSreenDaysNum;
    	else if((beforeDaysNum > semiSreenDaysNum) && (afterDaysNum < semiSreenDaysNum))
    		return showDaysTotalNum - SCALE_FACTOR;
    	else
    		return 0;
    }
    
    function getBeforeShowDaysNum(){
    	var currentDateStr = getCurrentDateStr();
    	
    	for(var i = 0; i < showDaysTotalNum; i++){
    		if(xAxisDateArray[i] == currentDateStr)
    			break;   			
    	}
    	
    	return i; 	 
    }
	

							
	function initXTickLength(){
	  	var xTickTotal = webviewWidth - gridX - gridX2;
	  	xTickLength = xTickTotal / SCALE_FACTOR;
   }						

    function setYAxisDiv(){
    	yAxisLength = mucusChartHeight - gridY - gridY2;
    	yAxisTickLength = yAxisLength / yAxisSplitNumber;
    	document.getElementById('mucusChartYAxisTable').style.height = yAxisLength + "px";
    	document.getElementById('mucusChartYAxisTable').innerHTML = getYAxisTableContent();
    	document.getElementById('mucusChartYAxis').style.marginTop = gridY + "px";
    	document.getElementById('mucusChartYAxis').style.marginBottom = gridY2 + "px";
    	document.getElementById('mucusChartYAxis').style.height = yAxisLength + "px";
    }

    function getYAxisTableContent(){
        var yAxisTableContent = "";
        var preRowStr = '<tr> <td style="vertical-align:middle;text-align: center;">';
        var postRowStr = '</td> </tr>';

        for(var i = 0; i < mucusYAxisContent.length; i++ ){
            yAxisTableContent += preRowStr + mucusYAxisContent[i] + postRowStr;
        }

        return yAxisTableContent;
    }

    function showMucusDetail(){
        document.getElementById('detail_table').style.display="block";
    }

    function showMucusYAxis(){
        document.getElementById('mucusChartYAxis').style.display="block";
    }